import Vue from 'vue';
Vue.directive('ripple', {
  bind: function (el, binding) {
    el.classList.add('ripple');

    el.addEventListener('touchstart', function () {
      el.classList.add('active');
    });

    el.addEventListener('touchend', function () {
      el.classList.remove('active');

      // Delay the execution of the custom function
      setTimeout(function () {
        binding.value(); // Execute the custom function
      }, 500); // Delay of 500ms
    });
  },
  unbind: function (el) {
    el.classList.remove('ripple', 'active');
  },
});
